<?php

/**
 * [2025]
 *
 * @package 2025
 * @author shean
 * @version 2025-09
 * @link http://doubao.life
 */
ini_set('opcache.revalidate_freq', 0);
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$data = getBingToday();
$cate = array_reverse($data['month']);
?>
<!DOCTYPE HTML>
<html lang="zh-cn">

<head><?php $this->need('header.php'); ?></head>

<body class="bg-tran">
<div class="container">
    <div class="columns px-0">
        <?php if ($this->have()): ?>
            <?php while ($this->next()): ?>
                <div class="column col-6 col-sm-12">
                    <?php $cover = getFirstCover($this); ?>
                    <div onclick="handleItemClick(this)" class="travel-item animate__animated"
                         style="background-image:url('<?php echo $cover; ?>');" data-url="<?php $this->permalink(); ?>"
                         data-title="<?php $this->title(); ?>" data-lng="<?php echo $this->fields->mapLng; ?>"
                         data-lat="<?php echo $this->fields->mapLat; ?>" data-desc="<?php $this->fields->postDesc(); ?>"
                         data-date=" <?php $this->date('Y年m月d日'); ?>">
                        <div class=" title text-ellipsis"><?php $this->title(); ?></div>
                        <div class="h">&nbsp;</div>
                        <div class="text-right text-small">
                            <div class="flag"><?php $this->date('Y年m月d日'); ?></div>
                        </div>
                    </div>
                </div>
            <?php endwhile; ?>
        <?php else: ?>
            <div class="column col-6 col-sm-12" style="margin:0 auto;">
                <div class="text-center d-flex" style="margin:20px 10px;height:calc(100vh - 100px);align-items: center;justify-content: center;">
                    <div>
                        <div class="-icon -e404 -super" style="margin:0 auto;"></div>
                        <div class="mt-2 text-large text-center">暂无内容</div>
                    </div>
                </div>
            </div>
        <?php endif; ?>
    </div>
</div>
<div class="columns px-0">
    <div class="column col-12">
        <?php $this->pageNav('←', '→'); ?>
    </div>
</div>

<script>
    (() => {
        const parent = window.parent.length
        if (parent === 0) location.href = '/'

        window.resize = () => {
            resetItemHeight()
        }

        window.theme = getSystemTheme()
        document.body.setAttribute('data-theme', getSystemTheme());
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
            const newTheme = event.matches ? 'dark' : 'light';
            document.body.setAttribute('data-theme', newTheme);
        });

        initItemAni()
        resetItemHeight()
    })()

    function resetItemHeight() {
        //获取窗口高度
        let height = window.innerHeight;
        const item = document.querySelectorAll('.h')
        for (let i = 0; i < item.length; i++) {
            item[i].style.height = ((height / 2) - 195) + 'px';
        }
    }

    function getSystemTheme() {
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            return 'dark';
        } else {
            return 'light';
        }
    }

    function initItemAni() {
        //给页面中的列表项添加鼠标划过动画
        //travel-item
        let travelItem = document.querySelectorAll('.travel-item')
        for (let i = 0; i < travelItem.length; i++) {
            travelItem[i].addEventListener('mouseover', () => {
                travelItem[i].classList.add('animate__pulse')
            })
            travelItem[i].addEventListener('mouseleave', () => {
                travelItem[i].classList.remove('animate__pulse')
            })
        }
    }

    //点击项目
    function handleItemClick(e) {
        const val = {
            title: e.dataset.title,
            url: e.dataset.url,
            lat: e.dataset.lat,
            lng: e.dataset.lng,
            data: e.dataset.date,
            desc: e.dataset.desc
        }
        window.parent.postMessage({
            act: 'viewPost',
            val: val
        }, '*');
    }
</script>
</body>

</html>